<template>
    <div class="h-auto">
        <div> <button @click="lightMode" class="border-2 p-1 m-1" :class="appStore.isDark?'':state.selectOn">普通模式</button>
        <button @click="darkMode" class="border-2 p-1 m-1" :class="appStore.isDark?state.selectOn:''">暗黑模式</button>
        <button @click="changeLanguage('en')" class="border-2 p-1 m-1" :class="currentLocale.lang=='en'?state.selectOn:''">English</button>
        <button @click="changeLanguage('zh')" class="border-2 p-1 m-1" :class="currentLocale.lang=='zh-CN'?state.selectOn:''">中文</button>
        <button @click="onLogout" class="border-2 p-1 m-1">退出</button>
       
    </div>
       
        <div class="title">
            {{ $t('home.welcome') }}:首页-{{vo.name}}-{{hooks.getDate().date}}
            <h2 v-if="gushi" @click="getData()">{{gushi || ''}}</h2>
        </div>
        <div>{{ currentLocale.elLocale.name }}</div>
        <el-col>
            <el-row>
                <el-col :xs="24" :span="12">
                    <div class="-mt-2 p-2 lg:mt-0 lg:w-full lg:max-w-md lg:flex-shrink-0">
                        <div class="rounded-2xl bg-gray-50 dark:bg-slate-800 py-10 text-center ring-1 ring-inset ring-gray-900/5 dark:ring-slate-300/5 lg:flex lg:flex-col lg:justify-center lg:py-16">
                            <div class="mx-auto max-w-xs px-8">
                                <p class="text-2xl font-semibold">{{vo.gushi2.title}}</p>
                                <p class="mt-6 flex items-baseline justify-center gap-x-2">
                                    <span class="text-base font-bold tracking-tight">{{vo.gushi2.content}}</span>

                                </p>
                                <div @click="getHttpData"><a href="#"
                                        class="mt-10 block w-full rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">{{ $t('btn.btnRefresh') }}</a>
                                </div>
                                <p class="mt-6 text-xs leading-5 text-gray-600">Invoices and receipts available for easy company reimbursement</p>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :xs="24" :span="12">
                    <div class="-mt-2 p-2 lg:mt-0 lg:w-full lg:max-w-md lg:flex-shrink-0">
                        <div class="rounded-2xl bg-gray-50 py-10 text-center ring-1 ring-inset ring-gray-900/5 lg:flex lg:flex-col lg:justify-center lg:py-16">
                            <div class="mx-auto max-w-xs px-8">
                                <p class="text-base font-semibold text-gray-600">Pay once, own it forever</p>
                                <p class="mt-6 flex items-baseline justify-center gap-x-2">
                                    <span class="text-5xl font-bold tracking-tight text-gray-900">$349</span>
                                    <span class="text-sm font-semibold leading-6 tracking-wide text-gray-600">USD</span>
                                </p>
                                <a href="#" class="mt-10 block w-full rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Get
                                    access</a>
                                <p class="mt-6 text-xs leading-5 text-gray-600">Invoices and receipts available for easy company reimbursement</p>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-col>

        <div class="text-center text-blue-700">
            <h1 class="text-4xl">{{$t('home.helloTailwind')}}</h1>
        </div>
        <div>
            <el-divider content-position="left">表单</el-divider>
            <el-form ref="vo.form" :model="vo.form" label-width="80px">
                <el-form-item label="活动名称"><el-input v-model="vo.form.name"></el-input></el-form-item>
                <el-form-item label="活动区域">
                    <el-select v-model="vo.form.region" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option> </el-select></el-form-item>
                <el-form-item label="活动时间">
                    <el-col :span="11"> <el-date-picker type="date" placeholder="选择日期" v-model="vo.form.date1" style="width: 100%;"></el-date-picker></el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11"><el-time-picker placeholder="选择时间" v-model="vo.form.date2" style="width: 100%;"></el-time-picker></el-col>
                </el-form-item>
                <el-form-item label="即时配送"><el-switch v-model="vo.form.delivery"></el-switch></el-form-item>
                <el-form-item label="活动性质">
                    <el-checkbox-group v-model="vo.form.type">
                        <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                        <el-checkbox label="地推活动" name="type"></el-checkbox>
                        <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                        <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="特殊资源">
                    <el-radio-group v-model="vo.form.resource">
                        <el-radio label="线上品牌商赞助"></el-radio>
                        <el-radio label="线下场地免费"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="活动形式"><el-input type="textarea" v-model="vo.form.desc"></el-input></el-form-item>
                <el-form-item><el-button type="primary" @click="onSubmit">立即创建</el-button><el-button>取消</el-button></el-form-item>
            </el-form>
        </div>

    </div>

</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, getCurrentInstance } from 'vue'
// 导入 store 仓库
import { useLocaleStore } from '@/store/modules/locale.ts'
import { useStore } from '@/store/modules/user'
import { useAppStore } from '@/store/modules/app'

// 导入路由
import { useRouter } from 'vue-router'
import  hooks  from '@/hooks/hooks.js'
/**API */
import * as DemoApi from '@/api/demo'
import http from '@/utils/http'

const appStore = useAppStore()
/**代理 当前实例，等同vue2的this,可以获取$refs  proxy.$refs=this.$refs */
const { proxy } = getCurrentInstance()
const router = useRouter()
// 多语言相关
const localeStore = useLocaleStore()
const store = useStore();


const currentLocale = computed(() => localeStore.currentLocale)

const vo= reactive<{ name: string, form: Record<string, any>, gushi2: DemoApi.ShiciVO }>({
  name: '萧大侠',
  form: {},
  gushi2: {} as DemoApi.ShiciVO
});
const state = reactive({lang:'zh', selectOn:"bg-orange-500"});

// 调接口的示例
const gushi = ref('')
const getData = async () => {
    const res = await DemoApi.getShici();
    console.log('古诗', res);
    gushi.value = res?.hitokoto || ''
}
//直接从http 接口请求
const getHttpData = async () => {
    const res = await http.get('https://v1.jinrishici.com/all.json')
    console.log('res', res);
    vo.gushi2.content = res.content
    vo.gushi2.title = `《${res.origin}》-${res.author}`
}

getData()
getHttpData()
/**
 * 黑色主题
 */
const darkMode = () => {
    appStore.setIsDark(true);
}
/**高亮主题 */
const lightMode = () => {
    appStore.setIsDark(false);
}

const changeLanguage = (lang) => {
    state.lang=lang;
    proxy.$i18n.locale = lang; // 切换语言
    localeStore.setCurrentLocale({
    lang: lang
  })
}

const setLocale = () => {
    console.log(localeStore.currentLocale);
    if (localeStore.currentLocale.lang === "zh-CN") {
      proxy.$i18n.locale = 'zh'; // 切换语言
    }else{
      proxy.$i18n.locale = localeStore.currentLocale.lang; // 切换语言
    }
}

const onLogout=()=>{
//console.log(`name,t('home.welcome')`);
    ElMessageBox.confirm(
        proxy.$t('common.logout'),
        proxy.$t('common.warning'),
    {
      confirmButtonText: proxy.$t('btn.btnConfirm'),
      cancelButtonText: proxy.$t('btn.btnCancel'),
      type: 'warning',
    }
  )
    .then(() => {
        doLogout();
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: `${proxy.$t('common.cancel')}`,
      })
    })
}
const doLogout=()=>{
    store.logout();
    router.push({ path: '/login' })
}
onMounted(()=>{
    setLocale()
})
</script>

<style lang="scss" scoped>
$color: #1bdcfd;
</style>